@import url("vars.less");

@listingBorderRadius: 10px;


ul#resourceListing li.resource {
	background: #FFF;
    .gradient(#f2f2f2,#FFF);
	border: 1px solid @borderGrey;
    list-style: none;
    padding: 8px;
	position: relative;
	margin: 0 0 20px 0 ;
	min-height: @listingLiHeight;
	.border-radius(0, @listingBorderRadius, @listingBorderRadius, 0);
}

.allExceptVoting {
	min-height: @listingLiHeight - 10px;
	cursor: pointer;
}

.goto {
	position:absolute;
	top: 25px;
	right: 30px;
	.transition(background-color, 0.5s, linear);
	background: url("images/goto.png") no-repeat @ltGrey;
	width: 54px;
	height: 50px;
}

.goto:hover {
	background: url("images/goto.png") no-repeat @borderGrey;
}

.categoryImage {
	display: inline-block;
}

.moreInfo {
	font-size: 10px;
	margin: 0 auto;
	width: 100%;
	background: @borderGrey;
	text-align:center;
	display: block;
	position:absolute;
	bottom: 0;
	right: 0;
	.border-radius(0, 0, 8px, 0);
	color: @ltGrey;
	padding: 3px 0;

}

ul#resourceListing li h1 {
	font-size: 20px;
	display: inline-block;
}
ul#resourceListing li h1:hover {
	text-decoration: underline;
}

.addedInfo {
	font-size: 10px;
	color: @drkBlue;
}

.description 
{
    display: none;
	line-height: normal;
	font-size: 12px;
	margin-top: 10px;
	margin-bottom: 10px;
	clear:both;
}

.difficultyBadge {
	position: absolute;
	top: -20px;
	right: -20px;
}

ul#resourceListing .voting {
	width: 100px;
	margin-left: -110px;
	margin-top: -9px;
	float:left;
	height: @listingLiHeight + 16;
	.gradient(#f2f2f2,#FFF);
	border: 1px solid @borderGrey;
	font-size: 20px;
	.border-radius(@listingBorderRadius,0, 0, @listingBorderRadius);
	
}

ul#resourceListing .voting div {
	text-align:center;
}

ul#resourceListing .voting div[class^=vote] {
	height: 20;
	cursor:pointer;
	.transition(background-color, 0.5s, linear);
}

ul#resourceListing .voting div[class*=up] {
	color: #11eb00;
}

ul#resourceListing .voting div[class*=up]:hover {
	color: #0db101;
}

ul#resourceListing .voting div[class*=down] {
	color: #ff0000;
}

ul#resourceListing .voting div[class*=down]:hover {
	color: #c10000;
}

ul#resourceListing .voting div[class*=down] span {
	color: @ltGrey;
	font-size: 10px;
	margin-top: -10px;
}

.allVotes {
	height: 60% - 16;
	font-size: 34px;
	padding-top: 16px;
}

ul#resourceListing .labelList li {
	margin: 5px 5px 10px 0;
}

.resourceTypeContainer {
	width: 30px;
	height: 16px;
	.border-radius(4px, 4px,4px,4px);
	background: #333;
	padding: 3px;
	display: inline-block;
}

.resourceType {
	background: url("images/resourceTypeSprite.png") #333 no-repeat top center;
	margin:auto;
	
	width: 16px;
	height: 13px;
}

.resourceType video {
	background-position: 0 0;
}
